@use '@scss/common' as *;

.pill {
  display: flex;
  align-items: center;
  color: var(--color-success-500);
  border-radius: 4px;
  padding: 1px 8px 3px 8px;
  width: max-content;
}

.color--default {
  background-color: var(--theme-elevation-150);
  color: var(--theme-elevation-1000);
}

.color--success {
  background-color: var(--theme-success-100);
  color: var(--theme-success-800);
}

.color--blue {
  background-color: var(--theme-blue-100);
  color: var(--theme-blue-800);
}

.color--error {
  background-color: var(--theme-error-100);
  color: var(--theme-error-600);
}

.color--warning {
  background-color: var(--theme-warning-100);
  color: var(--theme-warning-700);
}

.text {
  font-size: 16px;
  line-height: 20px;
}

@include small-break {
  .pill {
    padding: 0.25rem 0.45rem;
    margin: 0;
    max-height: 28px;
  }

  .text {
    @include small;
  }
}
